<template>
  <view class="menu-box flex around">

    <view class="menu-item">
      <u-icon name="star" :name="isCollect?'star-fill':'star'" size="24" :color="isCollect?'#FF9D00':'#C8C8C8'"></u-icon>
      <text>收藏</text>
    </view>

    <view class="menu-item">
      <view class="left" @click="prev">
        <u-icon name="arrow-left" :color="currentNumber===1?'#C8C8C8':'#333333'"></u-icon>
      </view>
      <view class="sum" @click="openAnswerNav">{{ currentNumber }}/{{ answerData.total }}</view>
      <view class="right" @click="next">
        <u-icon name="arrow-right" :color="currentNumber===answerData.total?'#C8C8C8':'#333333'"
                customStyle="width: 100%;justify-content:flex-end"></u-icon>
      </view>
    </view>

    <view class="menu-item">
      <u-icon name="checkmark-circle-fill" size="24" color="#37B874"></u-icon>
      <text>{{ answerData.successTotal }}</text>
    </view>

    <view class="menu-item">
      <u-icon name="close-circle-fill" size="24" color="#FF3D31"></u-icon>
      <text>{{ answerData.errorTotal }}</text>
    </view>

  </view>
</template>
<script>
export default {
  name: "Menu",
  props: {
    isCollect: {
      type: Boolean,
      default: false
    },
    // total: 0, //总数
    //isCollect: 0, //是否收藏
    //successTotal: 0, //答对数量
    //errorTotal: 0, //打错数量
    answerData: {
      type: Object,
      required: true
    },
    currentNumber: {
      type: Number,
      default: 0
    }
  },
  methods:{
    next() {
      console.log("$emit")
      this.$emit("next",true);
    },
    prev() {
      this.$emit("prev",true);
    },
    openAnswerNav(){
      this.$emit("openAnswerNav",true);
    }
  }
}
</script>
<style scoped lang="scss">
.menu-box {
  padding: 0 18px;
  height: 40px;

  .menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    font-size: 16px;

    text {
      margin-left: 6px;
      color: #333333;
    }

    .left, .right, .sum {
      width: 30px;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }


    ::v-deep .u-icon {
      justify-content: space-between !important;
      width: 10px !important;
    }

  }
}
</style>